<template>
    <el-dialog v-model="dialogVisible" :title="userParams.id ? '编辑' : '新增'" width="500" :before-close="handleClose"
        :close-on-click-modal="false">
        <el-form :model="userParams" :rules="rules" ref="formRef">
            <el-form-item label="用户姓名" prop="username">
                <el-input placeholder="请您输入用户姓名" v-model="userParams.username"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="name">
                <el-input placeholder="请您输入用户昵称" v-model="userParams.name"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" prop="password" v-if="!userParams.id">
                <el-input placeholder="请您输入用户密码" v-model="userParams.password"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="save">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang='ts'>
import { ref, reactive ,watch} from 'vue'
import { reqUserInfo, reqAddOrUpdateUser } from '@/api/acl/user'
import type { SetRoleData, UserResponseData, Records, User, AllRoleResponseData, AllRole } from '@/api/acl/user/type';
import { ElMessage } from 'element-plus';
let dialogVisible = ref<boolean>(false)
//获取form组件实例
let formRef = ref<any>();
//收集用户信息的响应式数据
let userParams = reactive<any>({
    username: '',
    name: '',
    password: ''
});
//校验用户名字回调函数
const validatorUsername = (rule: any, value: any, callBack: any) => {
    //用户名字|昵称,长度至少五位
    if (value.trim().length >= 5) {
        callBack();
    } else {
        callBack(new Error('用户名字至少五位'))
    }
}
//校验用户名字回调函数
const validatorname = (rule: any, value: any, callBack: any) => {
    //用户名字|昵称,长度至少五位
    if (value.trim().length >= 5) {
        callBack();
    } else {
        callBack(new Error('用户昵称至少五位'))
    }
}
const validatorPassword = (rule: any, value: any, callBack: any) => {
    //用户名字|昵称,长度至少五位
    if (value.trim().length >= 6) {
        callBack();
    } else {
        callBack(new Error('用户密码至少六位'))
    }
}
//表单校验的规则对象
const rules = {
    //用户名字
    username: [{ required: true, trigger: 'blur', validator: validatorUsername }],
    //用户昵称
    name: [{ required: true, trigger: 'blur', validator: validatorname }],
    //用户的密码
    password: [{ required: true, trigger: 'blur', validator: validatorPassword }],
}
//取消按钮的回调
const handleClose = () => {
    //关闭抽屉
    dialogVisible.value = false;
}
//取消按钮的回调
const cancel = () => {
    //关闭抽屉
    dialogVisible.value = false;
}
//保存按钮的回调
const save = async () => {
    //点击保存按钮的时候,务必需要保证表单全部复合条件在去发请求
    await formRef.value.validate()
    //保存按钮:添加新的用户|更新已有的用户账号信息
    let result: any = await reqAddOrUpdateUser(userParams);
    console.log("userParams----", userParams);
    // return
    //添加或者更新成功
    if (result.code == 200) {
        //关闭抽屉
        dialogVisible.value = false;
        //提示消息
        ElMessage({ type: 'success', message: userParams.id ? '更新成功' : '添加成功' });
        //获取最新的全部账号的信息
        // getHasUser(userParams.id ? pageNo.value : 1);
        //浏览器自动刷新一次
        // window.location.reload();
        emit("childClick");
    } else {
        //关闭抽屉
        dialogVisible.value = false;
        //提示消息
        ElMessage({ type: 'error', message: userParams.id ? '更新失败' : '添加失败' });
    }
}
const init = (data: any) => {
    console.log("data==", data);
    dialogVisible.value = true;
    if (data.id) {
        Object.assign(userParams, data);
    } else {
        //清空收集数据
        userParams.id = "";
        // userParams.username = '';
        // userParams.name = '';
        // userParams.password = '';
    }
}
defineExpose({
    init
})
const emit = defineEmits(["childClick"]);
watch(dialogVisible, (newV: any, oldV: any) => {
    if (newV == false) {
        // formRef.value.clearValidate();//清理某个字段的表单验证信息。
        formRef.value.resetFields();//重置该表单项，将其值重置为初始值，并移除校验结果
    }
})
</script>
<style scoped lang='scss'></style>